<!doctype html>
<html ng-app>
<head>
<script src="http://code.angularjs.org/1.2.11/angular.min.js"></script>
<script src="script.js"></script>
<script src="protractorTest.js"></script>
</head>
<body>
	<div id="ctrl-exmpl" ng-controller="SettingsController2">
		Name: <input type="text" ng-model="name" /> [ <a href="" ng-click="greet()">greet</a> ]<br /> Contact:
		<ul>
			<li ng-repeat="contact in contacts">
				<select ng-model="contact.type">
					<option>phone</option>
					<option>email</option>
				</select>
				<input type="text" ng-model="contact.value" /> [ <a href="" ng-click="clearContact(contact)">clear</a> | <a href="" ng-click="removeContact(contact)">X</a> ]</li>
			<li>[ <a href="" ng-click="addContact()">add</a> ]</li>
		</ul>
	</div>
	<script>
    function SettingsController2($scope) {
        $scope.name = "John Smith";
        $scope.contacts = [
        {type:'phone', value:'408 555 1212'},
        {type:'email', value:'john.smith@example.org'} ];
         
        $scope.greet = function() {
        alert(this.name);
        };
         
        $scope.addContact = function() {
        this.contacts.push({type:'email', value:'yourname@example.org'});
        };
         
        $scope.removeContact = function(contactToRemove) {
        var index = this.contacts.indexOf(contactToRemove);
        this.contacts.splice(index, 1);
        };
         
        $scope.clearContact = function(contact) {
        contact.type = 'phone';
        contact.value = '';
        };
        }</script>
</body>
</html>